<template>
	<view class="pet_compose">
		<Navbar>合成</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="banner">
				<!-- <image :src="`${baseImageUrl}/other/1.png`"></image> -->
				<view class="info">
					<view class="name">{{name}}</view>
					<view class="desc">
						<u-parse :content="content" :previewImg="false"></u-parse>
					</view>
				</view>
			</view>
			<view class="sub_title">
				<image :src="`${baseImageUrl}/home/xs.png`"></image>
				<text>{{title}}</text>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in dataList">
					<view>
						<image :src="item.cover" class="cover"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view @click="choiceClick(index)">
						<text class="add">添加</text>
						<image :src="`${baseImageUrl}/common/add2.png`" class="add_image"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="btn_box">
				<view class="number">已选{{total}}个</view>
				<view class="btn" @click="submit">立即合成</view>
			</view>
		</view>

		<u-popup :show="show" bgColor="transparent" mode="center" @close="close">
			<view class="compose_list">
				<view class="close" @click="show=false">
					<image :src="`${baseImageUrl}/common/close1.png`"></image>
				</view>
				<view class="title">
					<view>
						<image :src="`${baseImageUrl}/common/zw.png`"></image>
						<text>请选择宠物</text>
						<image :src="`${baseImageUrl}/common/zw.png`"></image>
					</view>
				</view>
				<scroll-view scroll-x class="scroll_box">
					<view class="item" v-for="item in popupList">
						<view class="item_cover" @click="changeChecked(item)">
							<image :src="item.product_cover" class="item_cover"></image>
							<image :src="`${baseImageUrl}/common/checked.png`" class="checkbox" v-if="checked==item.id">
							</image>
						</view>
						<view class="item_name">{{item.product_name}}</view>
						<view class="item_name">#{{item.id}}</view>
					</view>
				</scroll-view>
				<view class="btn" @click="confirm">确定</view>
			</view>
		</u-popup>

		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<PetResult :id="order_id" @close="close" @success="success" />
		</u-popup>
		<image :src="`${baseImageUrl}/apng/composer.png`" class="apng" v-if="apng"></image>
	</view>
</template>

<script>
	import {
		skillComposeGet,
		skillMy,
		skillComposeSet
	} from '@/request/api.js';
	// import {
	// 	captchaAppId
	// } from "@/utils/config";
	import PetSelect from '@/components/home/PetSelect.vue';
	import PetResult from '@/components/home/PetResult.vue';
	export default {
		components: {
			PetSelect,
			PetResult
		},
		data() {
			return {
				name: "",
				content: "",
				title: "",

				dataList: [],
				index: null,

				checked: "",
				temp: null,

				popupList: [],
				popupIndex: [],
				total: 0,

				apng: false,

				order_id: "",
				show: false,
				popup_show: false
			}
		},
		async onShow() {
			let {
				need_number,
				setting
			} = await skillComposeGet();

			let dataList = [];
			for (let i = 0; i < need_number; i++) {
				dataList.push({
					id: "",
					cover: "",
					name: "请选择宠物",
					checked: ""
				})
			};
			this.content = setting?.content;
			this.title = setting?.title;
			this.dataList = dataList;

			let {
				pet
			} = await skillMy();
			this.popupList = pet;
		},
		onHide() {
			this.dataList = [];
			this.popupList = [];
		},
		methods: {
			async choiceClick(index) {
				this.index = index;
				let dataList = this.dataList[index];
				let checked = dataList.checked;
				this.checked = checked;
				this.show = true;
			},
			changeChecked(item) {
				let checked = item.id;
				if (this.checked == checked) {
					this.checked = "";
				} else {
					this.checked = checked;
					this.temp = item;
				}
			},
			confirm() {
				let checked = this.checked;
				let item = {
					id: "",
					cover: "",
					name: "请选择宠物",
					checked: ""
				};
				if (checked) {
					let dataItem = this.temp;
					item = {
						id: dataItem.id,
						cover: dataItem.product_cover,
						name: `${dataItem.product_name}#${dataItem.id}`,
						checked: checked
					};
				};
				let index = this.index;
				this.dataList[index] = item;
				this.show = false;
				this.checked = "";

				let dataList = this.dataList;
				let total = 0;
				dataList.forEach(dataItem => {
					dataItem.checked ? total++ : ""
				});
				this.total = total;
			},
			async submit() {
				let dataList = this.dataList;
				let ids = [];
				dataList.forEach(item => {
					ids.push(item.id)
				});
				if (new Set(ids).size !== ids.length) {
					this.$u.toast("请勿选择同一个宠物");
					return false;
				}
				// const captcha = new TencentCaptcha(captchaAppId, async (res) => {
				// 	if (res.ret !== 0) return false;
				// 	let {
				// 		randstr,
				// 		ticket
				// 	} = res;
				res = await skillComposeSet({
					ids: ids
				});
				this.order_id = res.order_id;
				this.apng = true;
				setTimeout(() => {
					this.apng = false;
					this.open();
				}, 3000);
				// }, {});
				// captcha.show();
			},
			open() {
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;

			},
			success(id) {
				this.popup_show = false;
				this.backRouter();
				// this.redirectRouter(`/pages/common/compose_order?id=${id}`)
			}
		}
	}
</script>

<style scoped lang="scss">
	$footerHeight: 158rpx;

	.pet_compose {
		height: 100vh;
		background: #29170D;
		overflow: hidden;
		position: relative;

		.apng {
			width: 500rpx;
			height: 481rpx;
			position: absolute;
			left: 50%;
			// top: 240rpx;
			// transform: translateX(-50%);
			// z-index: 2;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}

		.scroll_view {
			height: calc(100vh - 20rpx - #{$footerHeight});
			position: absolute;
			left: 0;
			top: 20rpx;

			.banner {
				width: 100%;
				padding: 380rpx 30rpx 0;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/bg/bg9.png) no-repeat;
				background-size: 100% 1109rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 300rpx;
					height: 300rpx;
				}

				.info {
					width: 100%;
					// height: 180rpx;
					text-align: center;
					margin-top: 465rpx;
					padding: 34rpx 55rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/bg/690_180.png) no-repeat;
					background-size: 100% 100%;

					.name {
						color: #494338;
						font-size: 50rpx;
						font-weight: 400;
						font-family: LiSu;
						margin-bottom: 20rpx;
					}

					.desc {
						color: #494338;
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
					}
				}
			}

			.sub_title {
				height: 98rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					color: rgba(255, 255, 255, .5);
					font-size: 32rpx;
					font-family: SimSun;
					font-weight: 400;
					padding-left: 12rpx;
					box-sizing: border-box;
				}
			}

			.list {
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					height: 116rpx;
					margin-bottom: 10rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/common/item_690_116.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;

					&>view {
						display: flex;
						align-items: center;
					}

					.cover {
						width: 80rpx;
						height: 80rpx;
					}

					.name {
						color: #494338;
						font-size: 36rpx;
						font-weight: 400;
						font-family: LiSu;
						margin-left: 20rpx;
					}

					.add {
						color: #494338;
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.add_image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: $footerHeight;
			background: #29170D;
			border-top: 2px solid #BC8478;
			padding: 18rpx 40rpx;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			bottom: 0rpx;
			z-index: 2;

			.btn_box {
				display: flex;
				justify-content: space-between;
				align-items: center;


				.number {
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
				}

				.btn {
					width: 210rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: 400;
					font-family: SimSun;
					background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
					background-size: 100% 100%;

					&.not {
						background: url(#{$baseImageUrl}/common/btn2.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}

	.compose_list {
		width: 688rpx;
		height: 606rpx;
		padding: 55rpx 60rpx 70rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/688_606.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.close {
			width: 122rpx;
			height: 122rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			transform: translate(50rpx, -50rpx);
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				height: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					color: #494338;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
					margin: 0 10rpx;
				}
			}
		}

		.scroll_box {
			white-space: nowrap;

			.item {
				display: inline-block;
				width: 150rpx;
				height: 168rpx;
				margin-right: 60rpx;
				padding-top: 18rpx;
				box-sizing: border-box;

				.item_cover {
					width: 150rpx;
					height: 150rpx;
					padding: 5rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/bg/372_372.png) no-repeat;
					background-size: 100% 100%;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.checkbox {
						width: 52rpx;
						height: 52rpx;
						position: absolute;
						top: -18rpx;
						right: -13rpx;
						z-index: 2;
					}
				}

				.item_name {
					text-align: center;
					color: #333;
					font-size: 30rpx;
					font-weight: 400;
				}

				&:last-child {
					margin: 0;
				}
			}
		}

		.btn {
			width: 204rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 400;
			font-family: SimSun;
			background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>